<template>
  <mobile-staff-selector
    v-model="staff"
    :options="staffSelectorOpts"
    @change="onChange"
    title="请选择"
  ></mobile-staff-selector>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import components from "@cloudpivot/form/src/renderer/components/mobile";
import { DefaultUserService } from "@/config/h3-form/user-service";
import { renderer } from "@cloudpivot/form";
renderer.StaffSelectorControl.service = new DefaultUserService();

@Component({
  name: "reportOrg",
  components: {
    MobileStaffSelector: components.StaffSelector
  }
})
export default class ReportOrg extends Vue {
  @Prop({
    default() {
      return [];
    }
  })
  value!: any[];

  @Prop({
    default: () => ({})
  })
  field!: any;

  @Prop({
    default: ""
  })
  formula!: string;
  staffSelectorOpts: any = {
    selectOrg: true,
    selectUser: true,
    mulpitle: true,
    showModel: true,
    showSelect: true,
  };

  staff: Array<any> = [];
    // 是否可以多选
  get isMulpitle () {
    return ['In', 'NotIn'].includes(this.formula);
  }

  onChange(fileList) {
    const temp = fileList.map(item => ({ value: item.id, label: item.name }));
    this.$emit("input", temp);
  }
  created() {
    this.value.forEach(item => {
      this.staff.push({
        id: item.value || item.id,
        name: item.label || item.name
      });
    });
    this.staffSelectorOpts.mulpitle = this.isMulpitle;
  }

}
</script>

<style lang="less">
.h3-org-select{
  z-index:20001;
}
</style>
